<script type="text/javascript" src="default/js/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="default/css/jquery.jqzoom.css" />
<script type="text/javascript" src="default/js/jquery.zoom.min.js"></script>

<script type="text/javascript">
	/*$(document).ready(function() {
		$('.jqzoom').jqzoom({
	            zoomType: 'innerzoom',
	            preloadImages: true,
	            alwaysOn:false,
	            title: false
	        });
	}); */
	$(document).ready(function(){
		$('.jqzoom').jqzoom({
	            zoomType: 'innerzoom',
	            preloadImages: true,
	            alwaysOn:false,
	            title: false
	        });
	});
	$(window).scrollTop(0);
	
</script>
<div class="narrowby">
	<!-- ko if: selectedCategory -->
	<h2 class="subtitle" data-bind="text: selectedCategory().name()">Extendable dining tables</h2>
	<!-- /ko -->
	<p class="lbtxt">
		&nbsp;
	</p>
	
</div>
<div class="insidecontent">
	<div class="subpage_leftmenu">
		<!-- ko foreach: productCategories -->
		<div class="mgroup">
			<p class="mgrptitle">
				<a href='javascript:void(0);' data-bind="text: $data.name"></a><em></em>
			</p>
			<ul class="mlistitem" data-bind="foreach: $data.children()">
				<li>
					<a href='#' data-bind="text: $data.name, click: $root.onCategoryClicked"></a>
				</li>
			</ul>
		</div>
		<!-- /ko -->
	</div>
	<div class="rpagecont">
		<!-- ko foreach: cabinet -->
		<div class="detailtopcontent">
			<div class="detailprodphoto">
				<div class="photocontainer">
					<a data-bind="attr:{'href': $data.image()}"  class='jqzoom' rel="gal1" title="">
						<img data-bind="attr:{'src': $data.listImage()[0].pathmedium}" width='400' height='400'  title="" />
					</a>
					<a href="#" class="photozoom_icon moorisprt"> </a>
				</div>
				<ul class="prodmorethumbs">
					<!-- ko foreach: $data.listImage -->
					<span data-bind="attr:{'rel': $data.pathlarge}"> </span>
					<li>
						<a href='javascript:void(0);' data-bind="attr:{'rel': $data.pathlarge}">
							<img data-bind="attr:{'src': $data.pathsmall}" />
						</a>
					</li>
					<!-- /ko -->
				</ul>
			</div>
			<div class="detailcontent">
				<h2 class="prodname" data-bind="text: $data.name()"></h2>
					<!--span class="block">[Chairs - D018]</span-->
				
				</br><p class="serrienumber">Article no.: <span data-bind="text: $data.code()"> </span></p>
				<!--p class="prodstatus">Availibility: Instock</p-->
				<!--div class="proddesc">
					<p><span data-bind="text: $data.shortDescription()"></span></p>
				</div-->
				<div class="proddesc">
					<span data-bind="text: $data.shortDescription()"></span>
				</div>
				<div class="pricerow">
					<p>List price: $<b data-bind="text: $data.retailPrice()"></b></p></br>
					<p>You Save: $<span data-bind="text: $data.discoutAmount()"></span>
						(<span data-bind="text: $data.discoutPercent()"></span>)</p></br>
					<p>Price: $<b data-bind="text: $data.specialPrice()"></b> & Shipping</p>
					<div class="clr"></div>
				</div>
				<div class="prodquantity">
					
					 Quantity: <input type="text" id="spinnerhide" value="1" style="width: 20px;"/>
					 <!--span class=" spinBox" id="demonstration1">
						<input value="1"><span class="spinBoxUp"><span></span></span>
						<span class="spinBoxDown"><span></span></span>
					</span-->
				</div>
				<a href="#" class="addtocart_btn">+ Add to cart</a>
				<div class="morenote">
					<p><strong>Materials</strong></p>
					<p>The choice of material depends on the design of the individual chair. Please contact your store for further details</p>
				</div>
			</div>
			<div class="clr"> </div>
		</div>
		<div class="bottom_viewalso">
			<h3 class="headingtext"><span>YOU MIGHT ALSO BE INTERESTED IN:</span></h3>
			<ul class="viewalso_list">
				<!-- ko foreach: $data.listCabinetPartImage -->
				<li>
					<a href='#' class="thumbpic"><img data-bind="attr: {'src': $data.path}"  alt="lamminate flooring" /></a>
					<a href='#' class="thumbtitle"><span data-bind="text: $data.title"></span></a>
				</li>
				<!-- /ko -->
			</ul>
		</div>
	<!-- /ko -->
	</div>
	<div class="clr"></div>	
</div>
